<template>
  <div class="app-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <!-- 卡片阴影封装属性  row 每一行  一行里面可以有多列-->
      <!-- ：psan=“字符串” 分母为24 -->
      <!-- 封装的组件 -->
      <TreeTools :node-data="companyInfo" :is-company="true" />
      <hr>
      <!-- 部门树形结构 :default-expand-all="true" 以开始展示所有字节点
      :props="{lable:'name'}" 改变默认节点字符  expand-on-click-node点击的时候不会自动收缩-->
      <el-tree
        :data="depts"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :props="{label:'name'}"
      >
        <!-- 这里就是可以自定义每个节点显示位置
      这里写的是模板，只需要写一次，外层遍历
      进行数组遍历，每个节点都用这个模板渲染一次
      这是作用域插槽需要在双标签内使用 -->
        <template v-slot="scoped">
          <!-- 封装的组件 -->
          <TreeTools :node-data="scoped.data" :is-company="false" @editDepts="editDepts" @addDepts="addDepts" @reloadPage="loadPage" />
        </template>
      </el-tree>
    </el-card>
    <!-- sync 这个修饰符是vue约定好的，可以在子组件修改他的值 -->
    <AddDepts ref="addDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @reloadPage="reloadPage" />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDeptsList } from '@/api/departments'
import { listToTreData } from '@/utils'
import AddDepts from './components/add-depts.vue'
export default {
  //  TreeTools  每一行的行装组件
  components: {
    TreeTools, AddDepts
  },
  data() {
    return {
      // 传给封装组件的数据
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 模拟数据
      depts: [
        // 每一个数据对象都是一个几点
      ],
      // 弹窗的显示
      isShowDialog: false,
      nodeData: {}
    }
  },
  async created() {
    // 调用封装函数获取数据
    this.loadPage()
  },
  methods: {
    // 编辑  传递的函数
    async editDepts(nodeData) {
      // this.nodeData = nodeData
      // 通过refs或者  ref绑定的组件，在调用这个组件内的函数
      // async await 标记的函数都是异步函数
      await this.$refs.addDepts.getDeptsDetail(nodeData)
      this.isShowDialog = true
    },
    // 请求等级数据的封装
    async loadPage() {
      // 获取部门列表 // 这里的数据是  以  pid 形式来处理的
      const { depts } = await getDeptsList()
      // 空字符串  都是顶级部门
      this.depts = listToTreData(depts, '')
      // console.log(this.depts)
    },
    // 子组件adddepts 传递的事件  刷新数据
    reloadPage() {
      // // 关闭子组件的弹窗   有种更好的方法 .sync
      // this.isShowDialog = false
      // 调用封装函数获取数据 刷新页面
      this.loadPage()
    },
    // 子组件treetolls 的点击事件触发的函数 子传父
    addDepts(nodeData) {
      // console.log(456)
      this.isShowDialog = true
      this.nodeData = nodeData
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
